<template>
 <div class="container">
  <LeftMenu/>
  <el-row>
    <el-col>
      <el-table
          :data="sitesArray"
          style="width: 100%;" >
        <el-table-column
            label="开始时间"
            width="350"
            header-align="center"
            align="center">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.experimentStartTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
            label="实验场次"
            width="250"
            header-align="center"
            align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">第{{ scope.row.experimentSites }}场</span>
          </template>
        </el-table-column>
        <el-table-column
            label="结束时间"
            width="400"
            header-align="center"
            align="center">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.experimentEndTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
            label="操作"
            header-align="center"
            align="center">
          <template slot-scope="scope">
            <el-button
                type="primary"
                @click="gotoSet(scope.$index, scope.row)">修改</el-button>
            <el-button
                type="danger"
                @click="gotoDel(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>

    <el-col>
      <el-dialog title="修改场次信息" :visible.sync="dialogFormVisible">
        <el-form :rules="formRules" ref="form" label-position="right" :model="form">
          <el-row>
           <el-col :span="12">
            <el-form-item
              label="资产初始值："
              prop="assetInitial"
              :label-width="formLabelWidth">
              <el-input style="width: 200px;" size="medium" v-model.number="form.assetInitial" autocomplete="off"></el-input>
            </el-form-item>
           </el-col>

           <el-col :span="12">
              <el-form-item
                label="资产配置时间："
                prop="roundInitial"
                :label-width="formLabelWidth">
              <el-input style="width: 200px;" size="medium" v-model.number="form.roundInitial" autocomplete="off">
                <template slot="append">秒</template>
              </el-input>
            </el-form-item>
            </el-col>

           <el-col :span="12">
            <el-form-item
                label="初始实验点1："
                prop="fundoneInitial"
                :label-width="formLabelWidth">
              <el-input style="width: 200px;" size="medium" v-model.number="form.fundoneInitial" autocomplete="off">
                <template slot="append">基金一</template>
              </el-input>
            </el-form-item>
           </el-col>

          <el-col :span="12">
            <el-form-item
                label="初始实验点2："
                prop="fundtwoInitial"
                :label-width="formLabelWidth">
              <el-input style="width: 200px;" size="medium" v-model.number="form.fundtwoInitial" autocomplete="off">
                <template slot="append">基金二</template>
              </el-input>
            </el-form-item>
          </el-col>

           <el-col :span="12">
            <el-form-item
                label="初始实验点3："
                prop="fundthreeInitial"
                :label-width="formLabelWidth">
              <el-input style="width: 200px;" size="medium" v-model.number="form.fundthreeInitial" autocomplete="off">
                <template slot="append">基金三</template>
              </el-input>
            </el-form-item>
           </el-col>

           <el-col :span="12">

            <el-form-item
                label="折算率："
                prop="conversionInitial"
                :label-width="formLabelWidth">
              <el-input style="width: 200px;" size="medium" v-model.number="form.conversionInitial" autocomplete="off">
                <template slot="append">实验点=1人民币</template>
              </el-input>
            </el-form-item>
          </el-col>

            <el-col :span="12">
              <el-form-item
                label="每阶段时间："
                prop="stageInitial"
                :label-width="formLabelWidth">
              <el-input style="width: 200px;" size="medium" v-model.number="form.stageInitial" autocomplete="off">
                <template slot="append">分钟</template>
              </el-input>
            </el-form-item>
            </el-col>

           <el-col :span="12">
            <el-form-item
                label="休息时间："
                prop="restInitial"
                :label-width="formLabelWidth">
              <el-input style="width: 200px;" size="medium" v-model.number="form.restInitial" autocomplete="off">
                <template slot="append">分钟</template>
              </el-input>
            </el-form-item>
           </el-col>

          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="sure('form')">确 定</el-button>
          <el-button @click="reset" type="success">重 置</el-button>
        </div>
      </el-dialog>
    </el-col>

  </el-row>
 </div>

</template>

<script>
import LeftNavMenu from '@/components/leftNavMenu'
import {selectSelective, deleteByPrimaryKey} from "@/api/Experiment";
import {updateByExperimentIdSelective} from "@/api/Initial";
import LeftMenu from "@/components/leftNavMenu";

export default {
  name: "sitesManage",
  components: {LeftMenu},
  comments: {
    LeftNavMenu
  },
  data(){
    var checkAsset = (rule, value, callback) => {
      console.table({rule,value,callback})
      if (!value) {
        return callback(new Error('不能为空'));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'));
        } else {
          if (value > 10000) {
            callback(new Error('初始资产不能大于一万'));
          }
          if (value < 1000) {
            callback(new Error('初始资产不能小于一千'))
          }
          else {
            callback();
          }
        }
      },100);
    };
    var checkConversionInitial = (rule, value, callback) => {
      console.table({rule,value,callback})
      if (!value) {
        return callback(new Error('不能为空'));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'));
        } else {
          if (value > 100) {
            callback(new Error('折算率不能大于一百'));
          }
          if (value < 10) {
            callback(new Error('折算率不能小于十'))
          }
          else {
            callback();
          }
        }
      },100);
    };
    var checkStageInitial = (rule, value, callback) => {
      console.table({rule,value,callback})
      if (!value) {
        return callback(new Error('不能为空'));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'));
        } else {
          if (value > 30) {
            callback(new Error('阶段时间不能大于三十分钟'));
          }
          if (value < 10) {
            callback(new Error('阶段时间不能小于十分钟'))
          }
          else {
            callback();
          }
        }
      },100);
    };
    var checkRoundInitial = (rule, value, callback) => {
      console.table({rule,value,callback})
      if (!value) {
        return callback(new Error('不能为空'));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'));
        } else {
          if (value > 60) {
            callback(new Error('资产配置时间不能大于一分钟'));
          }
          if (value < 10) {
            callback(new Error('资产配置时间不能小于十秒钟'))
          }
          else {
            callback();
          }
        }
      },100);
    };
    var checkRestInitial = (rule, value, callback) => {
      console.table({rule,value,callback})
      if (!value) {
        return callback(new Error('不能为空'));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'));
        } else {
          if (value < 1) {
            callback(new Error('休息时间不能小于一分钟'));
          }
          if (value > 5) {
            callback(new Error('休息时间不能大于五分钟'))
          }
          else {
            callback();
          }
        }
      },100);
    };
    var checkFundOne = (rule, value, callback) => {
      console.table({rule,value,callback})
      if (!value) {
        return callback(new Error('不能为空'));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'));
        } else {
          if (value < 100) {
            callback(new Error('基金初始值不能小于一百'));
          }
          if (value > 500) {
            callback(new Error('基金初始值不能大于五百'))
          }
          else {
            callback();
          }
        }
      },100);
    };
    var checkFundTwo = (rule, value, callback) => {
      console.table({rule,value,callback})
      if (!value) {
        return callback(new Error('不能为空'));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'));
        } else {
          if (value < 100) {
            callback(new Error('基金初始值不能小于一百'));
          }
          if (value > 500) {
            callback(new Error('基金初始值不能大于五百'))
          }
          else {
            callback();
          }
        }
      },100);
    };
    var checkFundThree = (rule, value, callback) => {
      console.table({rule,value,callback})
      if (!value) {
        return callback(new Error('不能为空'));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'));
        } else {
          if (value < 100) {
            callback(new Error('基金初始值不能小于一百'));
          }
          if (value > 500) {
            callback(new Error('基金初始值不能大于五百'))
          }
          else {
            callback();
          }
        }
      },100);
    };
    return{
      queryParams: {
        id: null,
        experimentSites: null,
        experimentStartTime: null,
        experimentEndTime: null,
        experimentPublishTime: null,
        experimentStatus: null
      },
      sitesArray: [],
      sitesId: '',
      dialogFormVisible: false,
      form: {
        id: null,
        experimentId: null,
        assetInitial: 1000,
        fundoneInitial: 100,
        fundtwoInitial: 100,
        fundthreeInitial: 100,
        conversionInitial: 20,
        stageInitial: 15,
        roundInitial: 25,
        restInitial: 1
      },
      formLabelWidth: '120px',
      formRules: {
        assetInitial: [
          { validator: checkAsset, trigger: 'blur' },
        ],
        conversionInitial: [
          { validator: checkConversionInitial, trigger: 'blur' },
        ],
        stageInitial: [
          { validator: checkStageInitial, trigger: 'blur' },
        ],
        roundInitial: [
          { validator: checkRoundInitial, trigger: 'blur' },
        ],
        restInitial: [
          { validator: checkRestInitial, trigger: 'blur' },
        ],
        fundoneInitial: [
          { validator: checkFundOne, trigger: 'blur' },
        ],
        fundtwoInitial: [
          { validator: checkFundTwo, trigger: 'blur' },
        ],
        fundthreeInitial: [
          { validator: checkFundThree, trigger: 'blur' },
        ]
      }
    }
  },
  mounted() {
    this.getSites();
  },
  methods: {

    gotoDel(index,row){
      console.log(row.id)
      this.$confirm('此操作将永久删除该场次, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteByPrimaryKey(row.id).then(res => {
          console.log(res.data.data)
        })
        //刷新
        window.location.reload()
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    reset(){
      this.form.assetInitial = 1000
      this.form.fundoneInitial = 100
      this.form.fundtwoInitial = 100
      this.form.fundthreeInitial = 100
      this.form.conversionInitial = 20
      this.form.stageInitial = 15
      this.form.roundInitial = 25
      this.form.restInitial = 1
    },

    sure(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.form.experimentId = this.sitesId
          updateByExperimentIdSelective(this.form).then(res =>{
            console.log(res.data)
          })
          this.$message({
            message: '设置成功',
            type: 'success'
          });
          this.dialogFormVisible = false;
        } else {
          return false;
        }
      });
    },

    getSites(){
      selectSelective(this.queryParams).then(res => {
        this.sitesArray = res.data.data.experiment
        console.log(this.sitesArray)
      })
    },
    gotoSet(index,row){
      this.dialogFormVisible = true
      this.sitesId = row.id
    }
  }
}
</script>

<style>

.el-dialog__header,
.dialog-footer{
  text-align: center;
}

</style>
